import React, { useEffect, useRef, useState } from 'react';

export default function RefHookDemo02() {

    const [count, setCount] = useState(0);

    // useRef返回一个ref对象，返回的ref对象在组建的整个生命周期中保持不变
    const numRef = useRef(count);

    // 下面click之后,count会改变，但不会重新渲染。 第二次就会显示count上一次改变的值
    useEffect(() => {
        numRef.current = count;
    }, [count])

    return (
        <div>
            {/* <h2>numRef中的值: {numRef.current}</h2>
            <h2>count中的值: {count}</h2> */}

            <h2>count上一次的值: {numRef.current}</h2>
            <h2>count这一次的值: {count}</h2>
            <button onClick={e => setCount(count + 10)}>+10</button>
        </div>
    )
}